// components/test1/test1.js
Component({
  // 指定所有 _ 开头的数据字段为纯数据字段
  options: {
    pureDataPattern: /^_/,
    multipleSlots: true //在组件定义时的选项中启用多 slot支持
  },
  lifetimes: {
    attached(){},  // 组件实例进入页面节点树
    detached(){},  // 组件实例被从页面节点树移除时执行
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    _rgb: {
      r: 0,
      g: 0,
      b: 0
    },
    fullColor: '0, 0, 0'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeR() {
      this.setData({
        '_rgb.r': this.data._rgb.r + 5 > 255 ? 255 : this.data._rgb.r + 5
      })
    },
    changeG() {
      this.setData({
        '_rgb.g': this.data._rgb.g + 5 > 255 ? 255 : this.data._rgb.g + 5
      })
    },
    changeB() {
      this.setData({
        '_rgb.b': this.data._rgb.b + 5 > 255 ? 255 : this.data._rgb.b + 5
      })
    },
    _randomColor() {
      this.setData({
        _rgb: {
          r: Math.floor(Math.random() * 256),
          g: Math.floor(Math.random() * 256),
          b: Math.floor(Math.random() * 256)
        }
      })
    }
  },
  observers:{
    // '_rgb.r, _rgb.g, _rgb.b': function(r,g,b){
    //   this.setData({
    //     fullColor: `${r}, ${g},${b}`
    //   })
    // }
    '_rgb.**': function (obj) {
      this.setData({
        fullColor: `${obj.r}, ${obj.g}, ${obj.b}`
      })
    }
  },
  
})
